<template>
  <div>
    <Header :config="config"></Header>
    <Navigation :config="config"></Navigation>
    <div class="banner">
      <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/8d38787feefb4c12884899952b8a7048.jpg" alt style="width: 100%;">
      <div class="b-title">联系我们</div>
    </div>
    <div class="lxwm-form">
      <div class="lf-center">
        <div class="lfc-info">
          <div class="title">联系我们</div>
          <div class="phone">电话：191-0267-1826</div>
          <div class="address">地址：上海市奉贤区金海公路</div>
        </div>
        <div class="lfc-form">
          <div class="tips">提交您的需求，立即获得 技术总监的精准报价...</div>
          <form class="form-box">
            <input type="text" class="input" v-model="fullName" placeholder="请输入您的姓名">
            <input type="text" class="input" v-model="weChat" placeholder="请输入您的微信">
            <select class="select" v-model="demand">
              <option value="">您的需求或疑惑</option>
              <option value="网站建设">网站建设</option>
              <option value="小程序开发">小程序开发</option>
              <option value="竞价托管">竞价托管</option>
              <option value="网站优化">网站优化</option>
              <option value="信息流广告投放">信息流广告投放</option>
              <option value="抖音运营">抖音运营</option>
            </select>
            <input type="number" class="input" v-model="budget" min="0" placeholder="请输入您的预算">
            <textarea class="textarea" v-model="content" placeholder="请表述您的简单需求，比如：公司展示型网站或企业商城网站之类的，您表述的越详细，我们越容易精准报价..."></textarea>
            <input type="text" class="input phone-input" v-model="phone" maxlength="11" placeholder="请输入您的手机号码">
            <button type="button" class="form-save" :disabled="formDisabled" @click="formSave">提交免费申请</button>
          </form>
        </div>
      </div>
    </div>
    <div class="lxwm-map" id="container"></div>
    <div class="lxwm-mode">
      <div class="lm-center">
        <ul class="lmc-ul">
          <li class="lmcu-li">
            <div class="cover icon1"></div>
            <div class="title">公司地址</div>
            <div class="desc">上海市奉贤区金海公路</div>
          </li>
          <li class="lmcu-li">
            <div class="cover icon2"></div>
            <div class="title">咨询电话</div>
            <div class="desc">191-0267-1826</div>
          </li>
          <li class="lmcu-li">
            <div class="cover icon3"></div>
            <div class="title">公司邮箱</div>
            <div class="desc">529317161@qq.com</div>
          </li>
          <li class="lmcu-li">
            <div class="cover icon4"></div>
            <div class="title">QQ</div>
            <div class="desc">529317161</div>
          </li>
        </ul>
      </div>
    </div>
    <Footer :config="config"></Footer>
  </div>
</template>

<script>
export default {
  async asyncData(ctx) {
    // 设置导航选中
    ctx.config.navData[7].on = true
    
    return {
      config: ctx.config
    }
  },
  head() {
    return {
      title: '联系我们-纺扬网站建设',
      meta: [
        { hid: 'description', name: 'description', content: '网站建设，seo优化公司哪家好，首选纺扬网站建设（☏:191-0267-1826），我们是专业的小程序建设，网站开发，seo关键词优化，巨量引擎抖音广告代运营公司，致力于为客户创造商业价值，合作共赢。' },
        { hid: 'keywords', name: 'keywords', content: '上海网站建设,网站设计,网站制作,上海建网站,小程序开发,APP开发,seo关键词优化,巨量引擎广告投放,抖音代运营，seo排名,seo,sem,联系我们,纺扬科技' }
      ],
      script: [
        { src: 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=AcA45NiO8Ga7wcz0jdFErXBWAW3Vw2Rv' }
      ]
    }
  },
  data() {
    return {
      fullName: '',
      phone: '',
      weChat: '',
      demand: '',
      budget: '',
      content: '',
      formDisabled: false
    }
  },
  mounted() {
    var map = new BMapGL.Map('container') // 创建Map实例
    var point = new BMapGL.Point(121.493392,30.956074)
    map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
    // 创建点标记
    var marker = new BMapGL.Marker(point)
    // 在地图上添加点标记
    map.addOverlay(marker)
    var opts = {
      width: 200,  // 信息窗口宽度
      height: 105,  // 信息窗口高度
      title: "纺扬科技"  // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow("咨询热线：191-0267-1826<br>Q Q：529317161<br>邮箱：529317161@qq.com<br>地址：上海市奉贤区金海公路", opts) // 创建信息窗口对象
    map.openInfoWindow(infoWindow, point)  // 开启信息窗口
    marker.addEventListener("click", function () {
      map.openInfoWindow(infoWindow, point)  // 开启信息窗口
    })
  },
  methods: {
    // 表单提交
    formSave() {
      if (this.phone == '') {
        this.$message({
          message: '请输入您的电话号码',
          type: 'warning'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '您的号码格式有误',
          type: 'warning'
        })
        return false
      }
      this.formDisabled = true
      this.$axios({
        url: this.$store.state.addMessageBoard,
        method: 'POST',
        headers: {
          'Content-Type':'application/x-www-form-urlencoded'
        },
        params: {
          fullName: this.fullName,
          phone: this.phone,
          weChat: this.weChat,
          demand: this.demand,
          budget: this.budget,
          content: this.content,
          ip: this.config.ip,
          pathUrl: this.config.domain + this.$route.fullPath
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message({
            message: data.msg,
            type: 'success'
          })
          this.fullName = ''
          this.phone = ''
          this.weChat = ''
          this.demand = ''
          this.budget = ''
          this.content = ''
          this.formDisabled = false
          return false
        }
        this.$message({
          message: data.msg,
          type: 'error'
        })
        this.formDisabled = false
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.formDisabled = false
      })
      return false
    }
  }
}
</script>